
// 样式
import '../assets/style/nav.css'
import '../assets/style/index.less'

import React, { useEffect } from 'react';

import * as echarts from 'echarts';


export default function Home() {
  // 登录的用户信息
  const user = JSON.parse(localStorage.user);

//   useEffect(() => {
//     var chartDom = echarts.init(document.getElementById('main'));
//  myChart.option( {
//   title: {
//     text: 'Rainfall vs Evaporation',
//     subtext: 'Fake Data'
//   },
//   tooltip: {
//     trigger: 'axis'
//   },
//   legend: {
//     data: ['Rainfall', 'Evaporation']
//   },
//   toolbox: {
//     show: true,
//     feature: {
//       dataView: { show: true, readOnly: false },
//       magicType: { show: true, type: ['line', 'bar'] },
//       restore: { show: true },
//       saveAsImage: { show: true }
//     }
//   },
//   calculable: true,
//   xAxis: [
//     {
//       type: 'category',
//       // prettier-ignore
//       data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
//     }
//   ],
//   yAxis: [
//     {
//       type: 'value'
//     }
//   ],
//   series: [
//     {
//       name: 'Rainfall',
//       type: 'bar',
//       data: [
//         2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
//       ],
//       markPoint: {
//         data: [
//           { type: 'max', name: 'Max' },
//           { type: 'min', name: 'Min' }
//         ]
//       },
//       markLine: {
//         data: [{ type: 'average', name: 'Avg' }]
//       }
//     },
//     {
//       name: 'Evaporation',
//       type: 'bar',
//       data: [
//         2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
//       ],
//       markPoint: {
//         data: [
//           { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
//           { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
//         ]
//       },
//       markLine: {
//         data: [{ type: 'average', name: 'Avg' }]
//       }
//     }
//   ]
// });

//   }, [])


  return (

    <div className='home'>

      <div style={{ marginBottom: '.5rem', padding: '24px', border: '1px solid #eee' }}>
        <div className='home-top'>

          <div className='home-top-left'>
            <div style={{ disPlay: "inline-block", float: "left", marginRight: "1rem" }}>
              <img style={{ width: '5rem', borderRadius: '50%' }} src={'http://xawn.f3322.net:8002/distremote/static/avatar/' + user.avatar} /></div>
            <div>
              <div style={{ fontSize: '1.05rem', marginBottom: '.1rem' }}>上午好，{user.username}，几天没见又更好看了呢😍</div>
              <div style={{ color: 'rgba(0,0,0,.45)', fontSize: '.8rem', padding: '.2rem 0' }}>{user.deptName} | {user.roleName}</div>
              <div style={{ color: 'rgba(0,0,0,.45)', fontSize: '.8rem', padding: '.2rem 0' }}>上次登录时间：{user.lastLoginTime}</div>
            </div>
          </div>

          <div className='home-top-right'>
            <div className='right-col'>
              <p>今日IP</p>
              <a href="">0</a>
            </div>
            <div className='right-col'>
              <p>今日访问</p>
              <a href="">0</a>
            </div>
            <div className='right-col'>
              <p>总访问量</p>
              <a href="">2576</a>
            </div>
          </div>
        </div>

      </div>

      <div className='home-bottom'>

        <div className='home-bottom-left' id='main'>

        </div>

        <div className='home-bottom-right'>信息</div>
      </div>

    </div>
  )
}
